<template>
  <div class="data-sync-page">
    <div class="header">
      <h2 class="title">数据同步管理</h2>
      <div class="toolbar">
        <el-button type="default" @click="goBack" class="back-btn">
          <el-icon>
            <ArrowLeft/>
          </el-icon>
          <span>返回</span>
        </el-button>
      </div>
    </div>

    <DataSyncManager @sync-complete="handleSyncComplete" />
  </div>
</template>

<script>
import { ArrowLeft } from '@element-plus/icons-vue'
import DataSyncManager from '@/components/DataSyncManager.vue'

export default {
  name: 'DataSync',
  components: {
    ArrowLeft,
    DataSyncManager
  },
  methods: {
    goBack() {
      // 检查是否有来源页面信息
      const from = this.$route.query.from;
      if (from === 'stock-trading') {
        // 返回到股票交易页面
        this.$router.push('/stock-trading-list');
      } else {
        // 默认返回上一页
        this.$router.go(-1);
      }
    },
    
    // 处理同步完成事件
    handleSyncComplete(result) {
      console.log('同步完成:', result);
      this.$message.success(`数据同步完成！共处理 ${result.processedStocks} 只股票`);
      
      // 可选：显示更详细的同步结果
      this.$notify({
        title: '同步完成',
        message: `成功处理 ${result.processedStocks} 只股票，总共 ${result.totalStocks} 只股票`,
        type: 'success',
        duration: 5000
      });
    }
  }
}
</script>

<style scoped>
.data-sync-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.toolbar {
  display: flex;
  gap: 10px;
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 响应式设计 */
@media (max-width: 1785) {
  .data-sync-page {
    padding: 10px;
  }
  
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .toolbar {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>